<template>
    <div class="home-box">
        <el-container class="home-container">
            <!-- 头部区域 -->
            <el-header>
                <div>
                    <img src="../assets/logo.png"/>
                    <span style="font-size: 20px;color: white">汽车后台管理系统</span>
                </div>
                <el-dropdown @command="handleCommand">
                    <el-avatar :src=userinfo.avatar></el-avatar>
                    <span style="font-weight: bolder;color: white">{{userinfo.loginName}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="eidt">编辑资料</el-dropdown-item>
                        <el-dropdown-item command="changeavatar">更换头像</el-dropdown-item>
                        <el-dropdown-item command="changePsw">修改密码</el-dropdown-item>
                        <el-dropdown-item command="exit">退出登录</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>

            </el-header>
            <!-- 页面主体区域 -->
            <el-container>
                <!-- 侧边栏 -->
                <!-- 侧边栏,宽度根据是否折叠进行s设置 -->
                <el-aside :width="isCollapse ? '64px':'200px'">
                    <!-- 伸缩侧边栏按钮 -->
                    <div class="toggle-button" @click="toggleCollapse">|||</div>
                    <!-- 侧边栏菜单 -->
                    <el-menu
                            background-color="#333744"
                            text-color="#fff"
                            :collapse="isCollapse"
                            active-text-color="#ffd04b"
                            router>
                        <NavMenu :menuData="menuList" content="left"></NavMenu>
                    </el-menu>

                </el-aside>
                <!-- 主体结构 -->
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
        <el-dialog title="用户信息"
                   :visible.sync="status"
                   width="30%">
            <UserAddOrUpdata :userId="userinfo.userId" v-model="status" :key="timer"></UserAddOrUpdata>
        </el-dialog>
        <el-dialog title="更换头像"
                   :visible.sync="avatarstatus"
                   width="30%">
            <div>
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:1000/system/user/updataimg"
                        :heardes="{'token':token}"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </el-dialog>
        <el-dialog
                title="修改密码"
                :visible.sync="dialogVisible"
                width="60%"
                :before-close="handleClose">
            <span>更改密码</span>
            <span slot="footer" class="dialog-footer"></span>
         <ChangePsw :userId=userinfo.userId ></ChangePsw>
        </el-dialog>
    </div>
</template>

<script>
    import NavMenu from "../components/NavMenu";
    import UserAddOrUpdata from "../components/system/UserAddOrUpdata";
    import ChangePsw from "../components/system/ChangePsw";

    export default {
        components: {
            NavMenu: NavMenu,
            UserAddOrUpdata,
            ChangePsw,
        },
        name: "home",
        data() {
            return {
                dialogVisible: false,
                avatarstatus: false,
                timer: '',
                active: 0,
                status: false,
                isCollapse: false,
                menuList: [
                    // {menuName:"",
                    // son:[{menuName:""}]}
                ],
                userinfo: {
                    userId: "",
                    loginName: "",
                    avatar: ""

                },
                imageUrl: '',
                token: ''
            }
        },
        created() {
            //根据token获取用户的信息
            this.initmenu();
            //初始化菜单
        },
        methods: {
            //重新渲染组件
            upcomen() {
                this.timer = new Date().getTime()//创新刷新组件问题
            },
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleCommand(command) {
                if (command == "exit") {
                    sessionStorage.clear()
                    this.$router.push({path:"/"})
                 location.reload()
                }
                if (command == "eidt") {
                    this.status = true;
                }
                if (command == "changePsw") {
                    this.dialogVisible = true
                }
                if (command == "changeavatar") {
                    this.avatarstatus = true
                }
            },
            toggleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.userinfo.avatar = res.result.avatar
                var that = this;
                this.$http.post(`/system/user/updatauserimg/`, this.userinfo).then(function (response) {
                    that.$message.success(response.data.message)
                });
                this.avatarstatus = false
                location.reload();
            },
            gettoken() {
                this.token = sessionStorage.getItem("token");
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            initmenu() {
                var that = this;
                this.$http.get("system/menu").then(function (r) {
                    console.log(r)
                    that.menuList = r.data.result.menulist;
                    that.userinfo = r.data.result.userinfo;
                })
            },


        }
    }
</script>
<style scoped lang="less">
    .home-box {
        height: 100%;
    }

    .home-container {
        height: 100%;
    }

    .el-header {
        background-color: #3C8DBC;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: white;
        font-size: 20px;

        > div {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }
        }
    }

    .el-aside {
        background-color: #333744;
        height: 100%;

        .el-menu {
            border-right: none;
        }
    }

    .el-main {
        background-color: #eaedf1;
    }

    .toggle-button {
        display: flex;
        justify-content: center;
        color: white;
    }
</style>